<template>
    <view class="pages" :class="GlobalThemes.commonBackGroundClass">
        <view class="search-top-box" id="navbar">
            <u-navbar
                back-icon-color="#ffffff"
                :is-back="false"
                :border-bottom="false"
                :background="typelist[tabIndex].background"
            >
                <view class="mp-name">
                    <text>{{ i18n('index').appName }}</text>
                </view>
                <view class="slot-wrap"><view class="search-wrap"></view></view>
            </u-navbar>
        </view>
        <view class="top-fixed" id="top-fixed">
            <view class="do-fixed">
                <u-tabs
                    :list="categoryList"
                    :is-scroll="true"
                    :current="categoryCurrent"
                    @change="categoryChange"
                ></u-tabs>
            </view>
        </view>
        <view class="waterfall-box">
            <!-- #ifdef MP-WEIXIN -->
            <!-- 广告 -->
            <Adview
                v-if="adSwitchKg"
                :adSwitchKg="adSwitchKg"
                :homeADList="oneAd"
            ></Adview>
            <!-- #endif -->
            <u-waterfall v-model="flowList" add-time="200" ref="uWaterfall">
                <template v-slot:left="{ leftList }">
                    <view
                        class="demo-warter"
                        v-for="(item, index) in leftList"
                        :key="index"
                        @click="goDetail(item.image)"
                    >
                        <u-lazy-load
                            threshold="-450"
                            border-radius="10"
                            :image="item.thumb"
                            :index="index"
                        ></u-lazy-load>
                    </view>
                </template>
                <template v-slot:right="{ rightList }">
                    <view
                        class="demo-warter"
                        v-for="(item, index) in rightList"
                        :key="index"
                        @click="goDetail(item.image)"
                    >
                        <u-lazy-load
                            threshold="-450"
                            border-radius="10"
                            :image="item.thumb"
                            :index="index"
                        ></u-lazy-load>
                    </view>
                </template>
            </u-waterfall>
            <u-loadmore
                bg-color="rgb(255, 255, 255)"
                :status="loadStatus"
                @loadmore="getWallpaperList"
                :is-dot="true"
                :load-text="loadText"
                icon-type="flower"
            ></u-loadmore>
        </view>
        <u-tabbar
            id="uTabbar"
            v-model="tarbarObj.tarbarCurrent"
            :list="tarbarObj.tarbarList"
            :border-top="true"
            :mid-button="tarbarObj.midButton"
            bg-color="#fff"
            :inactiveColor="typelist[tabIndex].color"
            :activeColor="tarbarObj.activeColor"
            icon-size="40"
            :height="tarbarObj.height"
            mid-button-size="80"
        ></u-tabbar>
        <!-- 加载条 -->
        <w-loading
            :text="i18n('common').loading"
            mask="true"
            click="false"
            ref="loading"
        ></w-loading>

        <u-back-top
            :custom-style="{ backgroundColor: typelist[tabIndex].color }"
            :icon-style="{ color: '#ffffff' }"
            :scroll-top="scrollTop"
        ></u-back-top>
    </view>
</template>

<script>
import Adview from '@/components/home-ad/ad-view.vue';
import IndexMethods from './index_methods.js';
export default {
    components: {
        Adview
    },
    ...IndexMethods
};
</script>
<style lang="scss" scoped>
.demo-warter {
    border-radius: 8px;
    margin: 5px;
    padding: 8px;
    position: relative;
}
.demo-image {
    width: 100%;
    border-radius: 4px;
}
.pages {
    margin: 0;
    padding: 0;
    overflow-y: auto !important;
    .search-top-box {
        .mp-name {
            color: #fff;
            flex: 1;
            padding-left: 40upx;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
        .slot-wrap {
            display: flex;
            align-items: center;
            flex: 1;

            .search-wrap {
                flex: 1;
                margin: 0 20upx;
            }
        }
    }

    .top-fixed {
        position: relative;
        width: 750rpx;
        .do-fixed {
            width: 100%;
            position: fixed;
            z-index: 1;
        }
    }

    .waterfall-box {
        margin-top: 100upx;
    }
}
</style>
